<template>
  <div class="app-container home">
    <div class="box" v-if="isShow">
      <div class="title-box">
        <img src="@/assets/images/icon_16_title-r.png" alt="" />项目概览
      </div>
      <div class="content-box">
        <div
          :class="['content ' + 'box' + index]"
          v-for="(item, index) in titleArr"
          :key="item.value"
        >
          <div class="title-content">
            {{ titleData[item.value] }}
          </div>
          <div class="text-contnent">
            {{ item.label }}
          </div>
          <div class="triangle"></div>
        </div>
      </div>
    </div>
    <div class="box" v-if="isShow">
      <div class="title-box">
        <img src="@/assets/images/icon_16_title-r.png" alt="" />投资概览
      </div>
      <div class="content-box">
        <div
          :class="['content ' + 'box' + index]"
          v-for="(item, index) in titleArr1"
          :key="item.value"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :content="titleData[item.value]"
            placement="top"
          >
            <div class="title-content">
              {{ handleCutZero(titleData[item.value]) }}
            </div>
          </el-tooltip>

          <div class="text-contnent">
            {{ item.label }}
          </div>
          <div class="triangle"></div>
        </div>
      </div>
    </div>
    <div class="table-box">
      <div class="left-table">
        <div class="title-box">
          <div>
            <img src="@/assets/images/icon_16_title-r.png" alt="" />待办事项
          </div>
        </div>
        <el-table
          :data="tableData"
          v-loading="loading"
          empty-text="暂无数据"
          :max-height="450"
          style="width: 100%"
        >
          <el-table-column
            v-for="(item, index) in tableColumn"
            :key="index"
            :label="item.label"
            :prop="item.prop"
          >
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row.proId)"
                type="text"
                size="small"
                v-if="scope.row.node != '年度计划'"
                >查看详情</el-button
              >
              <el-button
                @click="handleDeclare(scope.row)"
                type="text"
                size="small"
                v-if="scope.row.node == '年度计划'"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="right-table">
        <div class="title-box">
          <div>
            <img src="@/assets/images/icon_16_title-r.png" alt="" />我的消息
          </div>
          <div class="view-more" @click="() => this.$router.push('/message')">
            查看更多
          </div>
        </div>
        <el-table
          :data="messageTableData"
          v-loading="loading"
          empty-text="暂无数据"
          :max-height="450"
          @row-click="rowClick"
          style="width: 100%"
        >
          <el-table-column label="类型" width="175">
            <template slot-scope="scope">
              <span class="title-tip" :class="{ 'inactive': scope.row.readFlag === '0' }"></span>
              <span>{{
                scope.row.noticeType == 0
                  ? "通知公告"
                  : scope.row.noticeType == 1
                  ? "系统消息"
                  : scope.row.noticeType == 2
                  ? "年度计划"
                  : "其他消息"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="标题"
            prop="noticeTitle"
            :show-overflow-tooltip="true"
            :formatter="stateFormat"
          ></el-table-column>
          <el-table-column
            label="时间"
            prop="createTime"
            width="187"
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 消息 弹窗 -->
    <message-detail
      ref="messDetail"
      :dialogForm="dialogForm"
      :title="titleName"
    />
    <!-- 年度计划 弹窗 -->
    <AnnualPlanDialog ref="annualPlanDialog" :dialogForm="dialogForm" :title="titleName"/>
  </div>
</template>

<script>
import { getSession } from '@/utils/tool'
import {
  getMessageList,
  getMattersList,
  getMessage,
  updateMessage,
} from "@/api/manage/messsage";

import messageDetail from "../message/childrenCpn/messageDetail.vue";
import AnnualPlanDialog from "../message/childrenCpn/annualPlanDialog"
export default {
  name: "index",
  components: {
    messageDetail,AnnualPlanDialog
  },
  data() {
    return {
      dialogForm: {},
      titleArr: [
        {
          label: "前期阶段 (个)",
          value: "applicationNum",
          listType: 0,
        },
        {
          label: "实施阶段 (个)",
          value: "implementNum",
          listType: 1,
        },
        {
          label: "验收备案 (个)",
          value: "preliminaryInspectionNum",
          listType: 2,
        },
        {
          label: "建设类项目 (个)",
          value: "constructionNum",
          listType: 3,
        },
        {
          label: "购买服务类 (个)",
          value: "buyAndServiceNum",
          listType: 4,
        },
        {
          label: "运维类项目 (个)",
          value: "operationAndMaintenanceNum",
          listType: 4,
        },
      ],
      titleArr1: [
        {
          label: "投资估算 (万)",
          value: "applicationReckon",
          listType: 0,
        },
        {
          label: "批复概算 (万)",
          value: "implementReckon",
          listType: 1,
        },
        {
          label: "竣工结算 (万)",
          value: "preliminaryInspectionReckon",
          listType: 2,
        },
        {
          label: "建设类项目 (万)",
          value: "constructionReckon",
          listType: 3,
        },
        {
          label: "购买服务类 (万)",
          value: "buyAndServiceReckon",
          listType: 4,
        },
        {
          label: "运维类项目 (万)",
          value: "operationAndMaintenanceReckon",
          listType: 4,
        },
      ],
      tableData: [],
      messageTableData: [],
      titleName: "",
      loading: false,
      tableColumn: [
        { label: "类型", prop: "node" },
        { label: "名称", prop: "name" },
        { label: "时间", prop: "updateTime" },
      ],
      titleData: {},
      queryParams: {
        pageSize: 100,
        pageNum: 1,
      },
      isShow:false,
    };
  },
  created() {
    this.getList();
    this.getMatters();
    // 判断登录账号，来显隐模块
    if(getSession('SET_ROLES')[0] == 'project'){
      this.isShow = false;
    }else{
      this.isShow = true;
    }
  },
  methods: {
    handleCutZero(num) {
        //拷贝一份 返回去掉零的新串
        let newstr = num;
        //循环变量 小数部分长度
        if(num){
          let leng = num.length - num.indexOf('.') - 1;
          //判断是否有效数
          if (num.indexOf('.') > -1) {
            //循环小数部分
            for (let i = leng; i > 0; i--) {
              //如果newstr末尾有0
              if (
                newstr.lastIndexOf('0') > -1 &&
                newstr.substr(newstr.length - 1, 1) == 0
              ) {
                let k = newstr.lastIndexOf('0');
                //如果小数点后只有一个0 去掉小数点
                if (newstr.charAt(k - 1) == '.') {
                  return newstr.substring(0, k - 1);
                } else {
                  //否则 去掉一个0
                  newstr = newstr.substring(0, k);
                }
              } else {
                //如果末尾没有0
                return newstr;
              }
            }
        }
      }
      return num;
    },
    getList() {
      getMessageList().then((res) => {
        if (res.code == 200) {
          this.titleData = res.data;
        }
      });
    },
    stateFormat(row, column, cellValue) {
      // console.log(row , column , cellValue)
      if (!cellValue) return "";
      if (cellValue.length > 16) {
        //最长固定显示4个字符
        return cellValue.slice(0, 16) + "...";
      }
      return cellValue;
    },
    // 点击代办事项查看详情按钮
    handleClick(proId) {
      // this.$router.push("/business_manage/manage/details?id=" + proId);
      if(getSession('SET_ROLES')[0] == 'project'){
        this.$router.push({
          path: "/manage/myProject/myProjectView",
          query: { proId: proId },
        });
      }else{
        this.$router.push({
          path: "/business_manage/manage/details",
          query: { id: proId },
        });
      }
    },
    handleDeclare(row){
      this.dialogForm = row;
      this.titleName = "年度计划"
      this.$refs["annualPlanDialog"].openDataScope = true;
    },
    rowClick(data) {
      this.dialogForm = data;
      if(data.noticeType == 0){
        this.titleName = "通知公告"
        this.$refs["messDetail"].openDataScope = true;
      }else if(data.noticeType == 1){
        this.titleName = "系统消息"
        this.$refs["messDetail"].openDataScope = true;
      }else{
        this.titleName = "年度计划"
        this.$refs["annualPlanDialog"].openDataScope = true;
      }
      
      if (data.readFlag == "0") {
        updateMessage(data.msgId).then((res) => {
          const count = Math.random();
          this.$store.commit("message/UPDATE_MESSAGE", count);
          this.getMatters();
        });
      }
    },
    // 代办事项列表查询
    getMatters() {
      getMattersList(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
        }
      });
      // 我的消息列表查询
      getMessage(this.queryParams).then((res) => {
        if (res.code == 200) {
          // this.messageTableData = res.rows;
          this.messageTableData=res.rows.filter(item=>!(item.msgStatus == 1 || item.readFlag ==1))
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  background: #f5f5f5;
  padding: 16px;
  font-size: 14px;
  .box {
    width: 1648px;
    height: 183px;
    background: #ffffff;
    border-radius: 8px;
    padding: 24px;
    margin: 0 auto 16px;
    .title-box {
      display: flex;
      align-items: center;
    }
    .content-box {
      margin-top: 24px;
      display: flex;
      .content {
        width: 197px;
        height: 86px;
        text-align: center;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        margin-right: 77px;
        position: relative;

        .title-content {
          margin: 15px 0 8px;
          font-size: 24px;
          font-family: DIN Alternate, DIN Alternate-Bold;
          font-weight: 700;
          height: 28px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .triangle {
          width: 0;
          height: 0;
          border-right: 10px solid transparent;
          position: absolute;
          top: 2px;
          left: 2.5px;
        }
      }
      .box0 {
        background: rgba(61, 96, 222, 0.04);
        border: 0.5px solid #3d60de;
        color: #3d60de;
        .triangle {
          border-top: 10px solid #3d60de;
        }
      }
      .box1 {
        background: #f7fafe;
        border: 0.5px solid #2e81ef;
        color: #2e81ef;
        .triangle {
          border-top: 10px solid #2e81ef;
        }
      }
      .box2 {
        background: rgba(40, 183, 215, 0.04);
        border: 0.5px solid #28b7d7;
        color: #28b7d7;
        .triangle {
          border-top: 10px solid #28b7d7;
        }
      }
      .box3 {
        background: rgba(51, 168, 61, 0.04);
        border: 0.5px solid #33a83d;
        color: #33a83d;
        .triangle {
          border-top: 10px solid #33a83d;
        }
      }
      .box4 {
        background: rgba(223, 32, 66, 0.04);
        border: 0.5px solid #df2042;
        color: #df2042;
        .triangle {
          border-top: 10px solid #df2042;
        }
      }
      .box5 {
        background: rgba(223, 130, 45, 0.04);
        border: 0.5px solid #df822d;
        color: #df822d;
        .triangle {
          border-top: 10px solid #df822d;
        }
      }
    }
  }
  .table-box {
    display: flex;
    margin: 0 auto;
    width: 1648px;
    justify-content: space-between;
    .right-table {
      .title-tip {
        &.inactive{
          background: #e35d4b;
        }
        background: transparent;
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 6px;
        margin-right: 20px;
      }
    }
    & > div {
      padding: 24px;
      width: 816px;
      min-height: 536px;
      background: #ffffff;
      border-radius: 8px;
      .title-box {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        justify-content: space-between;
        align-items: center;
        & > :first-child {
          display: flex;
          align-items: center;
        }
        .view-more {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          color: #666666;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
<style>
.home .el-table--enable-row-transition .el-table__body td {
  height: 40px;
  padding: 0;
}
.home .el-table .el-table__header-wrapper th {
  padding: 0;
  height: 40px;
}
.home v-deep.el-table__body-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>
